<template>
  <div class="order">
    <div class="top" @click="goAddress">
       <img src="https://gw.alicdn.com/tfs/TB17gX2wYvpK1RjSZPiXXbmwXXa-128-128.png_70x70q90_.webp" alt="" class="left">
    <div class="middle">
        <p>
            <span>{{ infos.name }}</span>&nbsp;&nbsp;
            <span>{{ infos.tel }}</span>
        </p>
        <p>
    <span>{{infos.province}}</span>  
    <span>{{infos.city}}</span>
      <span>{{infos.county}}</span>
   <span>{{ infos.addressDetail }}</span>
        </p>
        <p>收货不便时,可选择暂存服务</p>
    </div>
    <img src="" alt="" class="right">
    </div>
    <!-- 购物车点击提交进入订单页，传数组，循环，接收 -->
    <div class="con">
        <div class="content" v-for="(v,index) in list" :key="index">
            <div class="cTop">
                <img src="//gw.alicdn.com/tfs/TB1CzD7SXXXXXXJaXXXXXXXXXXX-32-32.png_40x40q90_.webp" alt="">
                <span>{{v.proname.slice(0,7)}}</span>
            </div>
            <div class="cMiddle">
                <van-swipe-cell>
                    <van-card :num="v.num ? v.num :1" :price="v.originprice" desc="净含量:48ml" :title="v.proname" class="goods-card"
                        :thumb="v.img1" >
                <template #tags>
                    <van-tag plain type="danger">破损包退</van-tag>
                    <van-tag plain type="danger">极速退款</van-tag>
                </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" />
                </template>
            
                </van-swipe-cell>
               <div class="txt">
                    <p>配送方式</p>
                    <p>普通配送</p>
                    <p>
                        <span>快递免邮</span>
                        <img src=""
                            alt="">
                    </p>
                </div> 
             <div class="txt txt2">
                    <p>配送时间</p>
                    <p>配送时间现在下单，预计2月11日送达</p>
                </div>
                <div class="txt txt3">
                <p>
                    <img src="https://gw.alicdn.com/tfs/TB1xdXGAER1BeNjy0FmXXb0wVXa-28-28.png_30x30q90_.webp" alt="">
                    <span>运费险</span>
                </p>
                    <p>
                        <span>卖家赠送，退换货可赔</span>
                        <img src=""
                            alt="">
                    </p>
                </div>
                <div class="txt txt4">
                    <p>开具发票</p>
                    <p>
                        <span>本次不开具发票</span>
                        <img src=""
                            alt="">
                    </p>
                </div>
              <div class="txt txt2">
                    <p>订单备注</p>
                    <p>
                        <span>选填，请先和商家协商一致，付款后商家可见</span>
                    </p>
                </div>
                <div class="txt txt4 txt6">
                    <p></p>
                    <p>
                        <span>共1件 小计 ￥</span>
                        <span ref="totalRef">{{ v.originprice * (v.num ? v.num : 1)}}</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <img src="https://gw.alicdn.com/tfs/TB1h11mCntYBeNjy1XdXXXXyVXa-36-36.png" alt="">
        <p>花呗分期(最高6期免息)</p>
        <van-checkbox v-model="checked"  checked-color="#FF6E09"></van-checkbox>
    </div>
    <div class="buy" >
       <van-checkbox v-model="checked1" checked-color="#FF6E09"></van-checkbox>
       <span>匿名购买</span>
 
    </div>
    <van-submit-bar :price="this.list.length == 1 ? totalOne : total"  button-text="提交订单" @submit="onSubmit" ref="total2"/>
  </div>
</template>

<script>
export default {
    name:'order',
    data() {
        return {
            checked: false,
            checked1: true,
            list: [],
            infos: {

            },

        }
    },
    methods: {
        goAddress() {
            this.$router.push('/myAddress')
        },
        onSubmit() {
            if (this.list.length == 1) {
                console.log(this.totalOne);
            } else {
                console.log(this.total);
            }
            this.$router.push({
                path: '/payMoney',
                query: {
                    total: this.list.length == 1 ? this.totalOne : this.total

                }
            })
            window.scrollTo({top:0})
        },
    },
    created() {

        {
            sessionStorage.setItem("infos", JSON.stringify({
                "id": 1,
                "name": "xn",
                "tel": "12345678901",
                "province": "天津市",
                "city": "天津市",
                "country": "",
                "addressDetail": "杭州市西湖区 黄龙万科中心",
                "isDefault": true,
                "areaCode": "120101"
            }))

        }
    },
    mounted() {
        if (sessionStorage.getItem('list')) {
            this.list = JSON.parse(sessionStorage.getItem('list'))
        }
        if (sessionStorage.getItem('infos')) {
            this.infos = JSON.parse(sessionStorage.getItem('infos'))
        }
      
    },
    activated() {
        if (this.$route.query.listOrder) {
            sessionStorage.setItem('list', this.$route.query.listOrder)
            this.list = JSON.parse(this.$route.query.listOrder)

        }

        if (this.$route.query.defaultInfo) {
            this.infos = JSON.parse(this.$route.query.defaultInfo)
            sessionStorage.setItem('infos', this.$route.query.defaultInfo)
        }
    },
    computed: {
        total() {
           return this.list.reduce((sum, item) => sum += (item.num * item.originprice * 100),0)
              
        },

        totalOne() {
            return this.list[0].originprice * 100
        }
        }
        }


</script>

<style lang="scss" scoped>

.order .top{
    margin: auto;
    margin-top: .24rem;
    width: 7.02rem;
    background: #fff;
    display: flex;
    align-items: center;
    border-radius: .2rem;
    img:nth-child(1){
        height: .64rem;
        width: .64rem;
        margin: 0rem .24rem;
    }
    img:nth-child(3) {
             height: .28rem;
             width: .28rem;
            margin: 0rem .24rem;
              }
    .middle{
        margin: .32rem 0;
        p:nth-child(1){
            span:nth-child(1)
          {
                    font-size: .3rem;
        }
        span:nth-child(2) {
            color: #999;
        }
        }
        p:nth-child(2){
            margin: .12rem 0rem 0rem;
        }
        p:nth-child(3) {
            margin-top: .12rem;
           color: rgb(255, 80, 0);;
        }
         }
}
.con{
        width: 7.02rem;
        margin: auto;
}
.content{
    margin-top: .24rem;
    background: #fff;
    border-radius: .2rem;

    .cTop {
            height: .88rem;
            line-height: .88rem;
            // 父元素加行高
            margin-left: .24rem;
            img{
                width: .36rem;
                height: .36rem;
                margin-right: .2rem;
                vertical-align: middle;
            }
        }
}

// 商品
.van-tag{
    margin-left:.08rem
}
 .goods-card {
     margin: 0;
     background-color: white;
 }
 .van-card__content{
    flex-direction: row;
    font-size: .28rem;

  div:nth-child(1){
    width: 3.08rem;
    height: 1.68rem;
}
    .van-card__bottom {
            display: flex;
            flex-direction: column;
            width: 1.2rem;
            height: 1.68rem;
            .van-card__price{
                width: 1.2rem;
                height: .32rem;
                   
            }
            .van-card__num{
                align-self: center;
            }

        }
  
 }

 .delete-button {
     height: 100%;
 }
 .cMiddle .txt{
    font-size: .26rem;
    color: #333;
    width: 7.02rem;
    padding-left: 0.24rem;
    height: .88rem;
    margin: auto;
    display: flex;
    align-items: center;
    img{
        width: .28rem;
        height: .28rem;
     vertical-align: middle;
    }
    p:nth-child(1){
      width: 1.08rem;
      img{
        width: .28rem;
        vertical-align: middle;
      }
    }
    p:nth-child(2) {
    width: 2.96rem;
    height: .28rem;
    }
    p:nth-child(3) {
    margin-left: .6rem;
    height: .32rem;
     
    img {
            width: .28rem;
            height: .28rem;
            margin-left: .2rem;
        }
    }

 }
  .cMiddle .txt2{
    p:nth-child(2){
        flex: 1;
        margin-top: -0.04rem;
    }
 }
  .cMiddle .txt3{
    p:nth-child(1) {
            img {
            margin-top: -0.04rem;
            }
        }
    p:nth-child(2){
        flex:1;
    margin-top: -0.04rem;
    img{
      margin-left: 2.4rem;
      margin-top: -0.04rem;
      width: .28rem;
      height: .28rem;
    }
    }
 }
.cMiddle .txt4{
    p:nth-child(2){
        margin-left: 3rem;
        img{
            margin-left: .2rem;
        }
    }
 }
 .cMiddle .txt6{
p:nth-child(2){
    span:nth-child(2){
        color:rgb(255, 80, 0);
        font-weight: bold;
    }
}
 }
 .bottom{
    margin: auto;
    margin-top: .24rem;
    width: 7.02rem;
    background: #fff;
    height: .8rem;
    display: flex;
    align-items: center;
    img{
        width: .4rem;
        padding-left: .48rem;
    }
    p{
        margin-left: .2rem;
    }
    ::v-deep .van-checkbox__icon--round {
        position: absolute;
        right: .48rem;

    }
 }

  .buy{
    display: flex;
    margin: auto;
    margin-top: .24rem;
    margin-left: .56rem;
    padding-bottom:1.2rem; 
   span{
        margin-left: .2rem;
   }
  }

.van-submit-bar__button--danger{
background: linear-gradient(-90deg, #FF5000 0%, #FF8400 100%);
}
.van-submit-bar{
    width: 7.5rem;
}
</style>